#slider {
  width: 100vw;
  height: 50vw;
  max-height: 100vh;
  position: relative;

  .swiper {
    --swiper-navigation-size: 32px;

    .swiper-button-prev,
    .swiper-button-next {
      color: $white;
      width: calc(var(--swiper-navigation-size) * 1.25);
      height: calc(var(--swiper-navigation-size) * 1.25);
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.25);
    }

    .swiper-button-prev:after,
    .swiper-button-next:after {
      font-family: "novem-icons";
    }

    .swiper-button-prev:after,
    .swiper-rtl .swiper-button-next:after {
      content: "\ebcb";
    }

    .swiper-button-next:after,
    .swiper-rtl .swiper-button-prev:after {
      content: "\ebcc";
    }
  }

  --#{$prefix}swiper-dots-position-bottom: 16px;

  .swiper-slide:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to top, #000c, #0000);
  }

  .swiper-pagination {
    right: auto;
    left: 50%;
    bottom: 1.75em !important;
    transform: translateX(-50%);
    width: auto;
    span {
      width: auto !important;
      height: 16px !important;
      line-height: 1.5rem;
      font-size: 14px;
      margin: 0 8px 0 0;
      text-align: left;
      border: 0;
      border-radius: 0;
      color: #fff;
      cursor: pointer;
      display: inline-block;
      vertical-align: middle;
      opacity: 0.75;
      background: transparent;
      &:hover {
        background: transparent !important;
      }

      &::after {
        content: "";
        border-top: 1px solid #fff;
        display: inline-block;
        vertical-align: middle;
        width: 0px;
        margin-left: 5px;
        transition: all 0.5s ease-out 0s;
      }

      &.swiper-page-item-active {
        font-size: 22px;
        font-weight: 600;
        &::after {
          width: 32px;
        }
      }
    }
  }

  .slider-button {
    --#{prefix}slider-button-side-offset: 32px;
    --#{prefix}slider-button-mobile-side-offset: 24px;
    --#{prefix}slider-button-mobile-bottom-offset: 16px;
    transition: 0.5s;
    outline: none;
    position: absolute;
    width: 90px;
    z-index: 10;
    top: auto;
    bottom: var(--#{prefix}slider-button-mobile-bottom-offset);
    transform: none;
    cursor: pointer;
    svg {
      display: block;
      transition: 0.5s;
    }
    .slider-svg-circle-wrap {
      transition: 0.5s;
      transform-origin: -20px 40px;
      opacity: 1;
    }
    circle {
      transition: 0.5s;
      stroke-width: 2px;
      stroke: #fff;
      fill: none;
      stroke-dasharray: 1;
      stroke-dashoffset: 1;
      opacity: 1;
      transform-origin: 0px 0px 0px;
    }
    .slider-svg-arrow {
      transition: 0.5s;
      fill: #fff;
      transform: rotateY(180deg) translate(-55px, 36.1px) scale(1.75);
    }
    .slider-svg-wrap {
      transform: translateY(353px);
    }
    .slider-svg-line {
      transition: 0.5s;
      stroke: #fff;
      stroke-width: 2;
      transform: translate(50px, 42px);
    }
    &:not(.slider-button-disabled):hover {
      .slider-svg-circle-wrap {
        transform: scale(1.1);
      }
      circle {
        stroke-dasharray: 4px;
        stroke-dashoffset: 4px;
        opacity: 1;
      }
      .slider-svg-arrow {
        transform: rotateY(180deg) translate(-40px, 36.1px) scale(1.75);
      }
      .slider-svg-line {
        transform: translate(35px, 42px) scaleX(0.5);
      }
    }
  }

  .slider-button-prev {
    left: var(--#{prefix}slider-button-mobile-side-offset);
    &:not(.slider-button-disabled):hover svg {
      transform: translate(-16px);
    }
  }

  .slider-button-next {
    right: var(--#{prefix}slider-button-mobile-side-offset);
    &:not(.slider-button-disabled):hover svg {
      transform: translate(16px);
    }
    .slider-svg-wrap {
      transform: translateY(353px) rotateY(180deg);
      transform-origin: 80px 0px 0px;
    }
  }

  .slider-button-disabled {
    opacity: 0.2;
    cursor: default;
  }

  .down-png-box {
    display: none;
  }
}

.home {
  .title-block {
    // display: flex;
    // justify-content: space-between;
    // align-items: center;
    margin-bottom: 20px;

    h2 {
      color: $gray-600;
      font-weight: 400;
      font-size: 22px;
      line-height: 30px;
      margin: 0;
    }

    a {
      text-decoration: none;
      // display: flex;
      // align-items: center;
      cursor: pointer;
      height: 30px;

      h2 {
        color: $gray-600;
      }

      &:hover {
        h2 {
          color: $warning;
        }
      }
    }
  }
}

.news {
  margin: 0;
  background: $gray-50;
}

.data {
  // background: #f2f2f2 url(/assets/images/zcu-clock.png) bottom center no-repeat;
  // background-size: contain;
  background: #f2f2f2;
  cursor: pointer;
  text-align: center;
  .data-title {
    position: relative;
    text-align: center;
    padding: 0 12vw;
    display: inline-block;
    &:after,
    &:before {
      content: "";
      position: absolute;
      width: 10vw;
      height: 1px;
      background-color: #bfbfbf;
      left: 0;
      top: 50%;
    }
    &:after {
      left: auto;
      right: 0;
    }
    h2 {
      font-weight: normal;
    }
  }

  .data-icon {
    position: relative;
    display: inline-block;
    height: 110px;
    width: 110px;
    padding: 15px;
    svg {
      position: relative;
      // z-index: 1;
    }
    .st0 {
      fill: none;
      stroke: $primary;
      stroke-width: 3;
      stroke-linecap: round;
      stroke-miterlimit: 10;
    }
    &:after {
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      border: 1px dashed $warning;
      border-radius: 50%;
      animation: rotate linear 55s infinite;
      z-index: 1;
    }
  }
  .data-desc {
    p {
      font-size: 16px;
      strong {
        font-size: calc(16px + 1.5vw);
        font-weight: 400;
        color: $gray-600;
      }
    }
  }
}

.enroll {
  // background: #efebea;
  .title-block {
    display: flex;
    flex-shrink: 0;
    text-align: left;
    width: 100%;
    align-items: center;
    justify-content: center;
    h2 {
      margin: 0;
      text-align: center;
    }
  }
  .item-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .item {
      flex: 1;
      transform: none !important;
      height: 90vw;
      position: relative;
      margin-left: 10px;
      overflow: hidden;
      color: #fff;
      img {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: all 0.3s ease-in-out;
      }
      .item-title {
        position: absolute;
        font-size: 1.25rem;
        writing-mode: tb-lr;
        writing-mode: vertical-lr;
        max-height: 70%;
      }
      .item-more-link {
        position: absolute;
        right: 10px;
        bottom: 10px;
        writing-mode: tb-lr;
        writing-mode: vertical-lr;
        text-align: center;
      }
      &:hover {
        img {
          transform: scale(1.1);
        }
      }
    }
    .item:nth-child(1) {
      margin-left: 0;
    }
  }
}

.honor {
  background: #efebea;
  margin: 0;
  .slider-element {
    max-width: 100% !important;
  }
  .item-box {
    display: none;
    div {
      background: url("/assets/images/home/bg-1.jpg") center center no-repeat;
      background-size: cover;
      color: #fff;
      p {
        text-align: justify;
        font-size: 14px;
      }
    }
  }
}

.people {
  background: #efebea;
  margin: 0;
  .people-item {
    display: block;
    position: relative;
    width: 100%;
    padding-bottom: 56.67%;
    .thumb {
      position: absolute;
      width: 100%;
      height: 100%;
      &::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(
          to top,
          rgba(0, 0, 0, 0.85) 0%,
          rgba(0, 0, 0, 0) 100%
        );
        height: 40px;
        z-index: 2;
      }
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .item-bottom {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 50px;

      z-index: 3;
      color: $white;
      // color: $gray-100;
      // background: $primary;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .title {
        font-size: 16px;
        letter-spacing: 0.25em;
        line-height: 26px;
        font-weight: 600;
        padding: 12px;
        text-align: center;
      }
      .intro {
        padding: 12px 16px;
        max-width: 40em;
        font-size: 14px;
        margin: 0 auto;
        text-align: justify;
      }
      .intro,
      .btn {
        display: none;
        background: none;
      }
      transition: all 0.6s ease-in-out;
    }
    &:hover {
      .item-bottom {
        height: 100%;
        background: #4865ab url("/assets/images/home/zcu-data.png") no-repeat
          center bottom;
        background-size: contain;

        .intro,
        .btn {
          display: block;
          color: $white;
        }
        .btn {
          &:hover {
            color: $warning;
          }
        }
      }
    }
  }
}

.scene {
  background: #fff;
  margin: 0;
  .panel-box {
    overflow: hidden;
    padding-bottom: 56.25%;
    min-height: 100%;
    position: relative;

    img {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: all 0.3s ease-in-out;
    }

    .panel-title {
      position: absolute;
      bottom: -1px;
      left: 0;
      right: 0;
      background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
      color: #fff;
      font-size: 16px;

      img {
        position: static;
        width: 3rem;
        height: 3rem;
      }
      span {
        font-size: 18px;
        line-height: 36px;
        font-weight: 400;
        vertical-align: bottom;
        color: $white;
      }
    }
    &:hover {
      img {
        transform: scale(1.15);
      }
    }
  }
  .panel {
    z-index: 1;
  }

  video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.media-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  .video-container {
    position: absolute;
    width: 100%;
    height: 100%;
    video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .media-trigger-playback {
    position: absolute;
    width: 56px;
    height: 56px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    background: rgba(11, 49, 143, 0.65);
    border-radius: 50%;
    z-index: 2;
    &::before {
      content: "";
      background: rgba(11, 49, 143, 0.65);
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      border-radius: 50%;
      animation: warn 1.8s ease-out infinite;
      z-index: 0;
    }
    i {
      border: 12px solid transparent;
      border-left: 18px solid #fff;
      display: block;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-top: -12px;
      margin-left: -6px;
    }
  }
  &.media-is-playing {
    .media-trigger-playback {
      opacity: 0;
    }
  }
}

.announcement {
  background: #efebea;
  .title-block {
    display: flex;
    flex-shrink: 0;
    text-align: left;
    width: 100%;
    align-items: center;
    justify-content: center;
    h2 {
      margin: 0;
      text-align: center;
    }
  }
}

#vr {
  padding-bottom: 50%;
  &:focus {
    outline: none;
    // border-style: none;
  }
  .vr720-link {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    .icon {
      background-color: hsla(0, 0%, 100%, 0.37);
      border-radius: 50%;
      cursor: pointer;
      margin-bottom: 30px;
      padding: 20px;
      position: relative;
      &::after,
      &::before {
        animation: ringKey 3s ease-in-out infinite;
        border: 1px solid hsla(0, 0%, 100%, 0.48);
        border-radius: 50%;
        content: "";
        position: absolute;
      }

      &::before {
        bottom: -20px;
        left: -20px;
        right: -20px;
        top: -20px;
      }

      &::after {
        bottom: -10px;
        left: -10px;
        right: -10px;
        top: -10px;
      }

      img {
        height: 40px;
        width: 40px;
      }
    }
    .title {
      text-align: center;
      color: #fff;
      font-weight: 600;
    }
  }
}

.cooperation {
  .panel-box {
    overflow: hidden;
    padding-bottom: 66.67%;
    min-height: 100%;
    position: relative;

    img {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: all 0.3s ease-in-out;
    }

    .panel-title {
      position: absolute;
      bottom: -1px;
      left: 0;
      right: 0;
      background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
      color: #fff;
      font-size: 16px;
      img {
        position: static;
        width: 3rem;
        height: 3rem;
      }
      span {
        font-size: 18px;
        line-height: 36px;
        font-weight: 400;
        vertical-align: bottom;
        color: $white;
      }
    }
    &:hover {
      img {
        transform: scale(1.15);
      }
    }
  }
}

@include media-breakpoint-up(sm) {
  .cooperation {
    .item {
      .text-box {
        .desc {
          -webkit-line-clamp: 2;
        }
      }
    }
  }
}
@include media-breakpoint-up(md) {
  #slider {
    .swiper-pagination {
      right: 16px;
      left: auto;
      transform: none;
    }

    .slider-button {
      top: 50%;
      bottom: auto;
      transform: translateY(-50%);
      width: 140px;
    }

    .slider-button-prev {
      left: var(--#{prefix}slider-button-side-offset);
    }

    .slider-button-next {
      right: var(--#{prefix}slider-button-side-offset);
    }
  }

  .home {
    .title-block {
      margin-bottom: 24px;

      h2 {
        font-size: 24px;
      }
    }
  }

  .enroll {
    .title-block {
      max-width: 6rem;

      h2 {
        writing-mode: tb-lr;
        writing-mode: vertical-lr;
      }
    }

    .item-list {
      .item {
        height: 37.5rem;
      }

      .item-more-link {
        right: 10px;
      }
    }
  }
  .announcement {
    .title-block {
      max-width: 6rem;

      h2 {
        writing-mode: tb-lr;
        writing-mode: vertical-lr;
      }
    }
    .ann-flex {
      flex-wrap: nowrap;
    }
  }
}
@include media-breakpoint-up(lg) {
  #slider {
    .down-png-box {
      width: 36px;
      height: 68px;
      position: absolute;
      bottom: 15px;
      left: 50%;
      display: block;
      z-index: 9;
      .down-png {
        position: absolute;
        z-index: 299;
        width: 36px;
        height: 17px;
        background: url("/assets/images/down-png.png") no-repeat;
        position: absolute;
        top: 0;
        cursor: pointer;
        opacity: 0;
        background-size: 36px 17px;
        animation-name: down_move;
        animation-duration: 2400ms;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-play-state: running;
      }
      .down-png1 {
        animation-delay: 0ms;
      }
      .down-png2 {
        animation-delay: 800ms;
      }
      .down-png3 {
        animation-delay: 1600ms;
      }
    }
  }
  .honor {
    .item-box {
      display: block;
      position: absolute !important;
      z-index: 2;
      right: 1rem;
      bottom: 0;
      .title {
        font-size: 16px;
        font-weight: 600;
      }
    }
  }
}

@include media-breakpoint-up(xl) {
  #slider {
    height: 100vh;
    --#{$prefix}swiper-dots-position-bottom: 32px;
    --swiper-navigation-size: 40px;
    .swiper-pagination-horizontal {
      right: 32px;
      .swiper-page-item {
        height: 16px !important;
        font-size: 14px;
        &.swiper-page-item-active {
          font-size: 22px;
          font-weight: 600;
          &::after {
            width: 50px;
          }
        }
      }
    }
  }
}
